<template>
    <a-modal :title="title" :width="600" :destroyOnClose="true" :maskClosable="false" :visible="visible"
             @cancel="handleCancel">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
            <a-form-model-item label="设置状态" prop="status" ref="status">
                <a-radio-group v-model="form.status">
                    <a-radio v-for="(item,index)  in MessageStatusOPT" :key="index" :value="item.value">{{item.label}}
                    </a-radio>

                </a-radio-group>
            </a-form-model-item>


            <a-form-model-item label="回复图片" help="最多三张图">


                <a-upload
                        :customRequest="customRequest"
                        list-type="picture-card"
                        :file-list="fileList"
                        @preview="handlePreview"
                        @change="handleChange"
                >
                    <div v-if="fileList.length <3">
                        <a-icon type="plus"/>
                        <div class="ant-upload-text">
                            上传图片
                        </div>
                    </div>
                </a-upload>
            </a-form-model-item>

            <a-form-model-item label="回复内容" prop="content" ref="content">
                <a-textarea placeholder="请设置回复内容"
                            v-model="form.content"
                            :rows="4"
                            @blur=" () => { $refs.content.onFieldBlur(); } "
                />

            </a-form-model-item>


        </a-form-model>


        <!-- Modal 页脚 -->
        <template slot="footer">
            <a-button @click="handleCancel(false)">关闭</a-button>
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </template>

    </a-modal>

</template>
<script>
    import {dictLoad, fileUpload} from "../../../util/internal.api";
    import {messageReply} from '../public/http.js';

    export default {

        props: ["mainId"],
        data() {
            return {
                loading: false, //按钮Loading
                title: "回复处理",
                visible: true, //modal 显示状态

                MessageStatusOPT: [],


                form: {
                    status: null,
                    picture: null,
                    content: null,

                },
                rules: {


                    status: {
                        required: true,
                        message: '请设置处理状态',
                        trigger: 'blur'
                    },


                    content: {
                        required: true,
                        message: '请设置回复内容',
                        trigger: 'blur'
                    },


                },


                previewVisible: false,
                previewImage: '',
                fileList: [],

            };
        },
        methods: {


            //关闭弹窗
            handleCancel(render) {
                this.visible = false;
                this.$emit('closeModal', {render: render});
            },

            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        //处理图像字符串
                        if (this.fileList.length > 0) {
                            const array = [];
                            this.fileList.map(item => array.push(item.url));
                            this.form.picture = array.join(',')
                        }


                        messageReply(this.mainId, this.form).then(res => {
                            this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                this.handleCancel(true)
                            }
                        })


                    }

                });
            },


            async handlePreview(file) {

                this.previewImage = file.url || file.preview;
                this.previewVisible = true;
            },

            //自定义上传方法
            customRequest(e) {


                const formData = new FormData();
                formData.append('file', e.file)
                const uid = e.file.uid;

                fileUpload(formData).then((res) => {
                    this.loading = false;
                    if (res.code === 0) {

                        const index = this.fileList.findIndex(item => item.uid === uid);

                        this.fileList[index].thumbUrl = res.data.url;
                        this.fileList[index].url = res.data.url;
                        this.fileList[index].status = "done";


                    }
                })
            },
            //监听上传状态  uploading 开始
            handleChange({fileList}) {
                this.fileList = fileList;
            },

            //上传之前数据检查
            beforeUpload(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error('只允许上传JPG、PNG格式的图片文件');
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('单个文件图片不能超过 2MB!');
                }
                return isJpgOrPng && isLt2M;
            },


        },


        created() {
            dictLoad("ArticleMessageStatus").then(res => this.MessageStatusOPT = res);


        }
    };
</script>
